<!-- ElTree.vue -->

<template>
  <div class="el-tree">
    <ul>
      <el-tree-node v-for="node in treeData" :key="node.id" :node="node" @nodeClick="handleNodeClick" />
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import ElTreeNode from './ElTreeNode.vue'; // 导入树节点组件
import { TreeNode } from './TreeNode';

export default defineComponent({
  props: {
    treeData: {
      type: Array as PropType<TreeNode[]>,
      default: () => [],
    },
  },
  components: {
    'el-tree-node': ElTreeNode, // 注册树节点组件
  },
  methods: {
    handleNodeClick(node: TreeNode) {
      // 处理节点点击事件
      console.log('Node clicked:', node.label);
    },
  },
});
</script>

<style scoped>
/* 根据需要定义树的样式 */
.el-tree {
  /* 样式规则 */
}

/* 更多样式规则可以根据需要添加 */
</style>